<template>
  <div id="app" :style="{'min-width': minWidth + 'px'}">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      minWidth: 0
    }
  },
  mounted() {
    window.addEventListener('resize', this.setAppWidth);
  },
  methods: {
    setAppWidth() {
      let width = document.documentElement.clientWidth;
      if (width <= 540) {
        this.minWidth = 360;
      } else {
        this.minWidth = 1200;
      }
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setAppWidth);
  }
};
</script>

<style lang="less">
#app {
  height: 100%;
  font-family: HarmonyOS_Sans_SC;
}
</style>
